// 分区管理C
<template>
  <p>
    <input v-model="新增的区" type="input" width="500" height="128" />
    <vxe-button content="新增区给: " status="primary" icon="vxe-icon--plus" @click="新增区"></vxe-button>
    <vxe-button @click="分配_保存" status="primary" content="保存修改"></vxe-button>
    <!-- <vxe-button @click="解除设备绑定" status="danger" content="解除设备绑定"></vxe-button> -->
    &nbsp;&nbsp;&nbsp;<font color="#FF0000">{{gameusername}}</font>
  </p>

  <vxe-table :data="分区显示数据" size="mini" ref="xTable" :edit-config="{trigger: 'click', mode: 'cell'}" :row-key="true" :loading="加载中">
    <vxe-table-column field="开关" title="分配">
      <template #default="{ row }">
        <vxe-checkbox v-model="row.开关" content=""></vxe-checkbox>
        {{row.开关}}
      </template>
    </vxe-table-column>
    <vxe-table-column field="区服" title="区服" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
    <vxe-table-column field="vip" title="vip" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
    <vxe-table-column field="元宝" title="元宝" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
    <vxe-table-column field="日常" title="日常" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
    <vxe-table-column field="age1" title="状态" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
    <vxe-table-column field="age2" title="操作" width="200">
      <template #default="{ row }">
        <vxe-button size="mini" content="删除" status="danger" @click="$refs.xTable.remove(row)"></vxe-button>
        <vxe-button size="mini" content="上移" status="primary" @click="上移(row)"></vxe-button>
        <vxe-button size="mini" content="下移" status="primary" @click="下移(row)"></vxe-button>
      </template>
    </vxe-table-column>
  </vxe-table>
  <br />

</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { VXETable, VxeTableInstance } from "vxe-table";
export default {
  data() {
    return {
      新增的区: "",
      分配_显示: false,
      分区显示数据: [],
      加载中: true,
    };
  },
  methods: {
    分配: function (要显示的数据) {
      console.log(要显示的数据);
      this.分配_显示 = true;
      this.分区显示数据 = JSON.parse(要显示的数据) || [];
      this.加载中 = false;
    },

    分配_保存: function () {
      var 修改后区服 = JSON.stringify(
        this.$refs.xTable.getTableData().tableData
      );
      var 待上传 = JSON.stringify([
        { 账号: this.gameusername, field: "data1", value: 修改后区服 },
      ]);
      let T = this;
      console.log(待上传);
      this.$axios
        .post(T.$route.query.admin + "/账号修改", {
          data: 待上传,
        })
        .then(function (response) {
          console.log(response.data);
          T.$XModal.alert({ content: "success 上传成功", status: "success" });
        })
        .catch(function (error) {
          alert("出错啦");
        });
    },

    新增区: function () {
      if (!this.新增的区) {
        alert("请输入新增区");
        return;
      }
      this.分区显示数据.push({
        区服: this.新增的区,
        开关: false,
        vip: 0,
        元宝: 0,
        日常: "",
        状态: "",
      });
      this.分区显示数据 = JSON.parse(JSON.stringify(this.分区显示数据));
      console.log(this.分区显示数据);
    },

    删除: function (row) {
      console.log(row);
    },
    上移: function () {},
    下移: function () {},
  },
  created() {
    console.log("到这里了");
    let T = this;
    console.log(this.gameusername);
    this.$axios
      .post(T.$route.query.admin + "/账号显示指定", {
        账号: T.gameusername,
      })
      .then(function (response) {
        console.log(response.data);
        console.log();
        T.分配(response.data[0].data1);
      })
      .catch(function (error) {
        alert("出错啦");
      });

    //  =

    // 要显示的数据()
  },
  props: ["gameusername"],
};
</script>


<style>
.vxe-button.type--button.theme--my-purple,
.vxe-button.type--button.theme--my-purple:hover {
  color: #fff;
}
.vxe-button.type--button.theme--my-purple {
  background-color: #006400;
}
.vxe-button.type--button.theme--my-purple:active {
  background-color: #a50aa5;
}
.my-green {
  color: #008000;
}
.my-primary {
  color: #3196ff;
}
.my-success {
  color: #67c23a;
}
.my-info {
  color: #909399;
}
.my-warning {
  color: #e6a23c;
}
.my-danger {
  color: #f56c6c;
}
</style>